<script setup lang="ts">
const props = withDefaults(
    defineProps<{
      height: string,
      padding: string,
    }>(),
    {
      height: '88rpx',
      padding: '0 20rpx',
    }
)
</script>

<template>
  <!-- 顶部导航栏 -->
  <view class="st-navbar" :style="{height, padding}">
    <!-- 导航栏左部 -->
    <view class="st-navbar__left">
      <slot name="left"></slot>
    </view>
    <!-- 导航栏标题 -->
    <view class="st-navbar__title">
      <slot></slot>
    </view>
    <!-- 导航栏右部 -->
    <view class="st-navbar__right">
      <slot name="right"></slot>
    </view>
  </view>
</template>

<style scoped lang="scss">
// 顶部导航栏
.st-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>